<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<!--
js 关键词
this 关键词指的是它所属的对象
它拥有不同的值,具体取决于它的使用位置 :
1.方法中 this指的是所有者对象
2.单独的情况下 this指的是全局对象
3.在函数中 this指的是全局对象
4.在函数中,严格模式下 this 是undefined
5.在事件中 this指的是接收事件的元素
像 call 和 apply 这样的方法可以将 this引用到任何对象


方法中的this 在对象方法中 this指的是此方法的拥有者
this 指的是person对象 是fullName方法拥有者

单独的 this
this 指的是全局对象

函数中的this (默认)
在 js函数中 函数的拥有者默认绑定的this
function myFunction() {return this;}
call() 和 apply() 方法是预定于js 方法 可以用于将另一个对象作为参数调用对象方法

箭头函数 允许我们编写更短的函数
使用箭头函数没有对this 的绑定 在常规函数中 关键字 this 表示调用该函数的对象
this 关键字 始终表示定义箭头函数的对象

js 类 语法 class ClassName{
  constructor() {}
}
class Car{
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}
该类有两个初始属性 name 和 year
js 类不是对象

使用类 ,可以使用该类来创建对象
let myCar1 = new Car("Ford", 2014);


Constructor 方法
构造方法 是一种特殊的方法
它必须拥有 确切名称的构造函数
创建新对象时自动执行
用于初始化对象属性
如果未定义构造函数方法 js 会添加空的构造函数方法

class 方法 类方法的创建
使用关键字 class 创建类
class ClassName{
  constructor() {}
  method1() {}
}

模块 允许将代码 分解成单独的文件
模块 是使用import 语句从外部文件导入的
模块 还依赖于 script 标签中的 type = module
script type="module"
import message from "/demo/js/message.js";

document.getElementById("demo").innerHTML = message();

导出 带有函数 或变量的模块 可以存储在任何 外部文件中
导出 有两种类型 命名导出和默认导出

数据导入 通过两种方式创建命名导出
一种 逐个内联创建
另一种 是在文件底部一次性全部创建

默认导出 默认导出是使用export default 关键字创建的

js 模块的 json  是存储 和传输数据的格式

json 指的是 轻量级的数据交换格式
json 独立于语言
json 是自描述 且易于理解
json 实例
{
employees: [
  {"firstName":"John", "lastName":"Doe"}
]
}

json 语法规则
数据是名称/值对
数据由逗号分隔
花括号报存对象
方括号保存数组

json 数据的书写方式是名称 /值对 名称/值对由双引号中的 字段名构成
"firstName":"Bill"

把json 文本转换为 js对象 json的通常用法是从web 服务器 读取数据 ,然后在网页中显示数据
js 调试  浏览器 中的 f12
可以使用 console.log() 在调试窗口中显示js 的值
a = 5;
b = 6;
c = a + b;
console.log(c);

设置断点 可以在js代码中设置断点
使用 debugger 关键字 可以在代码中设置断点
如果存在debugger 关键词 会停止 js的执行 并调用 调试函数

样式
js 代码约定 指的是编程的样式指导方针
变量和函数 的命名和声明规则
使用空格 缩进和注释的规则
编程习惯和准则

变量名 对标识符名称 使用了驼峰式大小写
firstName = "John";

运算符周围的空格
请始终在运算符 周围以及逗号之后添加 空格
var x = y + z;

代码缩进
始终使用对代码块缩进使用4个空格
function toCelcius(f) {
  return (5 / 9) * (f - 32);
}

语句规则
简单语句 始终以分号结束单条语句
针对复杂语句的通用规则
请在第一行的结尾处写开括号
请在开括号前使用一个空格
请在新行上写闭括号，不带前导空格
请不要以分号来结束复杂语句

js 最佳实践
避免全局变量 new === eval()
避免全局变量 尽量少的使用全局变量
包括 所有的数据类型 对象和函数
始终声明局部变量 必须通过 var 关键词 来声明 否则会创建全局变量
严格模式不允许未声明的变量

在顶部声明
var x, y, z;
firstName = "John";




-->
<body>
<p id="demo"></p>
<p id="dem1"></p>
<p id="dem2"></p>
<p id="dem3"></p>
<p id="dem4"></p>
<p id="dem5"></p>
<button id="btn">点击!</button>
<p id="dem6"></p>
<p id="dem7"></p>

<p>数据导入</p>
<p id="dem8"></p>
<script type="module">
import {name,age} from "/src/javascript_demo/person.js"
let text = "My name is " + name + ", I am" + age + ".";
document.getElementById("dem8").innerHTML = text;
</script>

<p>数据导出</p>
<p id="dem9"></p>
<script type="module">
  import message from "/src/javascript_demo/message.js";
  document.getElementById("dem9").innerHTML = message();
</script>

<p>json 字符串创建对象</p>
<p id="dem10"></p>
<script>
  var text = '{"employees":[' +
    '{"firstName":"John","lastName":"Doe" },' +
    '{"firstName":"Anna","lastName":"Smith" },' +
    '{"firstName":"Peter","lastName":"Jones" }]}';
  obj = JSON.parse(text);
  document.getElementById("dem10").innerHTML =
    obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

<p>调试器</p>
<p id="dem11"></p>
<script>
  var x = 15 * 5;
  debugger;
  document.getElementById("dem11").innerHTML = x;
</script>

<script>
  // 定义和使用类 方法 带参数的
  class Car {
    constructor(name, year) {
      this.name = name;
      this.year = year;
    }
    age(x) {
      return x - this.year;
    }
  }
  let date = new Date();
  let year = date.getFullYear();

  let myCar = new Car("Ford", 2014);
  document.getElementById("dem7").innerHTML = "My car is" + myCar.age(year) + " years old";

  var hello2;
  hello2 = function () {
    document.getElementById("dem6").innerHTML +=this;
  }
  // window 对象调用函数
  window.addEventListener("load", hello2);

  // button 对象调用函数
  document.getElementById("btn").addEventListener("click", hello2);


  // 箭头函数 如果函数只有一个语句,并且该语句返回一个值,则可以去掉括号和return 关键字
  let myFunction = (a, b) => a * b;
  document.getElementById("dem3").innerHTML = myFunction(4, 3);
  var hello;
  hello = () => {
    return "Hello World!";
  }
  hello1 = () => "Hello World!";
  document.getElementById("dem4").innerHTML = hello();
  document.getElementById("dem5").innerHTML = hello1();

  // this 引用person2 即使它是person1的方法
  var person1 = {
    fullName: function (){
      return this.firstName + " " + this.lastName;
    }
  }
  var person2 = {
    firstName:"Bill",
    lastName: "Gates"
  }
  var x = person1.fullName.call(person2);
  document.getElementById("dem2").innerHTML = x;

  // this引用window对象
  var x = this;
  document.getElementById("dem1").innerHTML = x;

  // 创建对象
  var person = {
    firstName: "John",
    lastName : "Doe",
    id       : 5566,
    fullName : function() {
      return this.firstName + " " + this.lastName;
    }
  };
  document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>
